<template>
  <div>
    <div class="top">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="ProjectBoxClick">新建</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-upload class="upload-demo"
                    action
                    :on-change="handleChange"
                    :on-exceed="handleExceed"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :file-list="fileListUpload"
                    :limit="limitUpload"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    :auto-upload="false">
            <el-button type="info" icon="el-icon-download" size="mini">导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只 能 上 传 xlsx / xls 文 件</div> -->
          </el-upload>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            @click="exportToExcel"
            icon="el-icon-upload2"
            size="mini"
          >导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="main">
      <el-table >
        <!-- v-loading="loading" :data="tableList" -->
        <el-table-column label="项目ID" type="index" width="100" align="center">
          <template slot-scope="scope">
            <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="项目名" align="center" prop="pName" :show-overflow-tooltip="true" width="130"/>
        <el-table-column label="项目总负责人" align="center" prop="pPerson" :show-overflow-tooltip="true" width="130"/>
        <el-table-column label="功能模块分配" align="center" prop="mAllocation" :show-overflow-tooltip="true" width="130"/>
        <el-table-column label="功能模块负责人" align="center" prop="mPerson" :show-overflow-tooltip="true" width="130"/>
        <el-table-column label="项目状态" align="center" prop="pState" :show-overflow-tooltip="true" width="130"/>
        <!-- <el-table-column label="项目权限" align="center" prop="pAuthority" :show-overflow-tooltip="true" width="130"/> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-remove-outline"></el-button>
            <el-button type="primary" size="small" icon="el-icon-edit-outline"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <project-box :dialogFormVisible.sync="dialogFormVisible"></project-box>
  </div>
</template>

<script>
//引入弹窗组件project
import projectBox from "../pop-up/projectBox.vue";
export default {
  name: 'ProjectMa',
  //在components中注册project组件
  components:{
    projectBox
  },
  data(){
    return{
      loading: false,
      limitUpload: 1,//限制上传文件的个数
      fileTemp: "",
      file: "",
      fileListUpload: [],
      pState:'',
      pName: '',
      pPerson: '',
      mAllocation: '',
      mPerson: '',
      // pAuthority: '',
      // showInput: false,
      // caption: '提示',
      dialogFormVisible: false,
    }
  },
  provide() {
    return {
      fatherMethod: this.fatherMethodHandle,
    };
  },
  methods:{
    fatherMethodHandle() {
      // 加上需要初始化的数据
      this.dialogFormVisible = false;
    },
    exportToExcel() {
      this.$confirm('确定下载列表文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
          this.excelData = this.tableData; // 你要导出的数据list。
          this.export2Excel()
        }).catch(() => {
      })
    },
    export2Excel() {
      var _that = this;
      require.ensure([], () => {
        const {export_json_to_excel} = require('../utils/Export2Excel');
        // Export2Excel.js文件的位置
        const tHeader = ['项目ID', '项目名', '项目总负责人', '功能模块分配', '功能模块负责人', '项目状态'];
        //导出的文件表头字段名
        const filterVal = ['id', 'pName', 'pPerson', 'mAllocation', 'mPerson', 'pState']; 
        // 导出的文件数据对应字段名，需要与导出的数据字段相对应
        const list = _that.tableData;
        const data = _that.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '公司项目表')
        // 导出的表格名称，根据需要自己命名
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    //导入操作相关方法
    handleChange(file, fileList) {
      // console.log(file)
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        //判断文件类别是否是excel
        // console.log(this.fileTemp.type)
        if (this.fileTemp.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
            this.fileTemp.type == "application/vnd.ms-excel") {
            this.importfxx(this.fileTemp)
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传!"
          });
        }
      }
    },
    importfxx(obj) {
      console.log("方法importfxx(obj)的参数obj:\n"+obj);
      let _this = this;//将当前this重新指向，以防this改变
      // 通过DOM取文件数据
      this.file = obj;
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      var reader = new FileReader();
      //if (!FileReader.prototype.readAsBinaryString) {
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function (e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是你想要的东西
          this.da = [...outdata];
          let arr = [];
          this.da.map(v => {
            let obj = {};
            obj.code = v["设备ID"];
            obj.type = v["设备型号"];
            arr.push(obj);
          });
          alert(outdata);
          console.log(outdata);
          //修改当前表格数据为导入的数据
          //表格的数据表头字段与数据字段名要相同才能改变当前表格值
          _this.tableData = outdata;
          return arr;
        };
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    handleRemove(file, fileList) {
      // console.log(file)
      this.fileTemp = null;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件,本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    //实现点击事件，点击事件一定要包含以下内容
    ProjectBoxClick(){
      this.dialogFormVisible = true;
      // this.caption = "请输入";
      this.pState = "";
      this.pName = "",
      // this.pAuthority = "";
      this.pPerson = "";
      this.mAllocation = "";
      this.mPerson = "";
      // this.showInput = true;
    },
    projectBoxYes(value){
        console.log(value);
        // this.showInput = false;
        // this.caption = "提示";
        this.msgText = "您输入的值是【" + value + "】";
        // this.showMsgShow = true;
    }
  }
}
</script>

<style>

</style>